<template>
	<div class="container">
		<el-page-header @back="$router.go(-1)" content="">
		</el-page-header>
		<div class="main">
			<el-row :gutter="20">
				<el-col :span="3" v-for = "(item,index) in caipu_list.slice(0,8)" :key = "index">
					<div class="grid-content bg-purple">
						<div class="item" @click = "handelClick(item)">
							<img :src=item.img_url>
							<p> {{item.details_name}}</p>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="3" v-for = "(item,index) in caipu_list.slice(8,16)" :key = "index">
					<div class="grid-content bg-purple">
						<div class="item" @click = "handelClick(item)">
							<img :src=item.img_url>
							<p> {{item.details_name}}</p>
						</div>
					</div>
				</el-col>
			</el-row>

		</div>
	</div>
</template>

<script>
// 按需导入 API 接口
import {
  getTuiJianAPI
} from '@/api/tuijianAPI'
// 导入请求数据的 baseurl
import baseUrl from '@/utils/urlconfig'
export default {
  data () {
    return {
      caipu_list: null,
	  goods_detail: null
    }
  },
  methods: {
    async initGetTuiJian (id) {
      // 1. 调用 API 接口
      const {
        data: res
      } = await getTuiJianAPI(id)
      console.log(res)
      // 2. 判断请求是否成功
      if (res.message === 'OK') {
        // 3. 为用户的频道列表赋值
        // console.log(res.data.info_list)
        this.goods_detail = res.data
        console.log(res.data)
        localStorage.removeItem('goodsitem')
        localStorage.setItem('goodsitem', JSON.stringify(this.goods_detail))
        this.$router.push({
		  path: '/caipu',
          name: 'caipu',
		  params: { goods_detail: this.goods_detail }
        })
      }
    },
    handelClick (item) {
	  console.log(111)
	  this.initGetTuiJian(item.id)
    }
  },
  created () {
    // this.initGetTuiJian()
    // var menuList = this.$route.params.menuList
	var kw = this.$route.query.kw
	if(kw){
		var url = baseUrl + '/menu/menu_detail/?kw=' + kw
		this.$http.get(url).then(function (res) {
				  localStorage.removeItem('goodsList')
				  console.log(res.data)
				  localStorage.setItem('goodsList', JSON.stringify(res.data.first_title))
				  this.caipu_list = res.data.data.first_title
		}).catch(function (error) {
				  console.log(error)
		})
	}else{
		var goodsList = JSON.parse(localStorage.getItem('goodsList'))
		this.caipu_list = goodsList
	}
  },
  mounted () {}
}
</script>

<style scoped>
	/* 全局导入公共样式 */
	@import url("../assets/css/common.css");

	p {
		margin: 0;
		padding: 0;
	}

	.container {
		width: 10rem;
		height: 5.625rem;
		margin: 0 auto;
		background: url(../assets/images/goods_bg1.png);
		background-size: 100% 100%;
		border: 1px solid #797979;

	}

	.main {
		width: 9.125rem;
		height: 4.2375rem;
		margin: 0.7825rem auto;
		overflow: auto;
		/* background-color: #000FFF; */
	}

	/* 1111111 */
	/*滚动条整体样式*/
	::-webkit-scrollbar {
		width: 1px;
		/*竖向滚动条的宽度*/
		height: 0px;
		/*横向滚动条的高度*/
	}

	::-webkit-scrollbar-thumb {
		/*滚动条里面的小方块*/
		background: #ccc;
		border-radius: 0.00625rem;
	}

	::-webkit-scrollbar-track {
		/*滚动条轨道的样式*/
		background: #ccc;
		border-radius: 0.00625rem;
	}

	/* 1111111 */
	.el-row {
		width: 19.125rem;
		margin-top: 0.28125rem;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #fff;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		box-sizing: border-box;
		padding: 0.0625rem;
		text-align: center;
		border-radius: 10px;
		min-height: 36px;
		width: 1.9875rem;
		height: 1.5125rem;
	}

	.grid-content .item {
		width: 1.8625rem;
		height: 1.375rem;
		/* margin: 0.075rem auto; */
		border-radius: 0.0625rem;
		overflow: hidden;
		background-color: #2c2c2c;
		;
	}

	.grid-content img {
		/* margin-top: 0.075rem; */
		width: 1.8625rem;
		height: 1.15rem;
	}

	.grid-content p {
		font-size: 0.1625rem;
		font-weight: bold;
		color: #fff;
		background-color: #2c2c2c;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
